<!--通用的模板选择器-->
<template>
  <el-dialog :title="title" :visible.sync="visible" 
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  :show-close="false"
  >
    
    <el-cascader-panel 
      v-model="value" 
      :props="props" 
      style="min-height:220px;overflow-x:hidden;"
      size="medium"
      >
      <template slot-scope="{ data }">
        <span>
          <i class="el-icon-folder" v-if="!data.leaf"/>
          <i class="el-icon-document" v-if="data.leaf"/>
          {{ data.label }}
        </span>
        </template>
      </el-cascader-panel>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handlerCancel">取 消</el-button>
      <el-button  size="mini" type="primary" :disabled="isDisabledButton" @click="handlerSelect">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
let _this ;
import formUtils from '@/utils/formUtils';
export default {
  name:'fancyTemplatePanel',
  data(){
    return {
      props:{
        lazy: true,
        lazyLoad (node, resolve) {
          const params = {};
          if(node.root){
            params.fdParentId = '';
          }else{
            params.fdParentId = node.value;
          }
          _this.$fetch(_this.action,params).then(res => {
            if(res.status === 1){
              const nodes = Array.from(res.data)
              .map(item => ({
                value: item.id,
                label: item.name,
                leaf: item.leaf
              }));
              
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
              setTimeout(()=>{
                let cascader_panel = document.getElementsByClassName('el-cascader-panel')[0];
                cascader_panel.scrollLeft = cascader_panel.scrollWidth+100;
                console.log(cascader_panel.scrollLeft);
              },100);
            }
          })
        },
        checkStrictly: false
      },
       value:[]
    }
   
  },
  methods:{
    handlerCancel(){
      this.value = [];
      this.$emit("update:visible",false);
    },
    handlerSelect(node){
      if(typeof(this.value) === 'undefined'){
        this.$message({
          message: '请选择模板！',
          type: 'warning'
        });
      }
      this.$emit("update:visible",false);
      this.$emit("select",this.value[this.value.length-1]);
      this.value = [];
    }
  },
  mounted(){
    _this = this;
  },
  props:{
    title:{
      type:String,
      default:"选择模板"
    },
    visible:{
      type:Boolean,
      default:false
    },
    action:{
      type:String,
      default:''
    }
  },
  computed:{
    isDisabledButton(){
      return this.value.length<1;
    }
  },
  watch:{
    visible(newVal){
      if(newVal&&!formUtils.isNotEmpty(this.action)){
        // this.$message({
        //   message: '未设置请求url!',
        //   type: 'warning'
        // });
        //this.$emit("update:visible",false);
      }
    }
  }
}
</script>
<style scoped>
.el-cascader-panel{
  overflow: hidden;
}
.el-cascader-panel >>> .el-scrollbar__wrap{
  overflow-x: hidden;
}
</style>